<?php /*a:1:{s:81:"D:\phpStudy1\PHPTutorial\WWW\DLMES\web\application\test\view\index\get_table.html";i:1592809079;}*/ ?>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--引入相关文件-->
    <link rel="stylesheet" type="text/css" href="/static/test/handsontable/handsontable.full.css"/>
    <script src="/static/test/handsontable/handsontable.full.js"></script>
    <script src="/static/test/handsontable/zh-CN.js"></script>
    <script src="/static/test/xlsx/xlsx.full.min.js"></script>
    <script src="/static/test/jquery-3.4.1.min.js"></script>
    <style>
        table {
            border: solid 1px black;
            border-collapse: collapse;
        }
        table td {
            border: solid 1px black;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
<input type="file" onchange="impt(this)"/>
<input type="button" onclick="clickMe(this)" value="点我"/>
<input type="button" onclick="clickHe(this)" value="点它"/>
<div id="hot<?php echo htmlentities($idStr); ?>"></div>
<div id="hot1"></div>
</body>
<script type="application/javascript">
    var hotElement = document.querySelector("#hot<?php echo htmlentities($idStr); ?>");//<====绑定handsontable初始化div
    var hotSettings = {
        data: [
            ["1","2","3"],
            ["4","5","6"],
            ["7","8","9"],
        ],
        language: "zh-CN",
        mergeCells: true,//合并单元格
        autoWrapRow: true,
        manualColumnResize: true,//当值为true时，允许拖动，当为false时禁止拖动
        manualRowResize: true,//当值为true时，允许拖动，当为false时禁止拖动
        stretchH: "none",     //last:延伸最后一列,all:延伸所有列,none默认不延伸。
        manualColumnMove: true,// 当值为true时，列可拖拽移动到指定列
        manualRowMove: true,// 当值为true时，行可拖拽至指定行
        rowHeaders: true, //当值为true时显示行头，当值为数组时，行头为数组的值
        columnSorting: true,//允许排序
        sortIndicator: true,
        contextMenu: {
            items: {
                "autoFillData": {
                    name: "自动填充",
                    callback: function (a, b, c) {
                        //a:名称;b:坐标;c:对象信息
                        var rowFlag = 1;
                        var colFlag = 65;
                        for (var i = b[0].start.row;i <= b[0].end.row; i++) {
                            for (var j = b[0].start.col;j <= b[0].end.col; j++) {
                                hot.setDataAtCell(i, j, String.fromCharCode(65+j)+(i+rowFlag));
                                colFlag++;
                            }
                        }
                    }
                },
                "separator1": "---------",
                "row_above": {},
                "row_below":{},
                "separator2": "---------",
                "col_left":{},
                "col_right":{},
                "separator3": "---------",
                "remove_row":{},
                "remove_col":{},
                "separator4": "---------",
                "undo":{},
                "redo":{},
                "separator5": "---------",
                "make_read_only":{},
                "separator6": "---------",
                "alignment":{},
                "separator7": "---------",
                "copy": {},
                "cut": {},
                "separator8": "---------",
                "borders": {},
                "separator9": "---------",
                "mergeCells":{},
            }
        },//显示右键菜单
        autoColumnSize: true, //当值为true且列宽未设置时，自适应列大小
        //colWidths: 150, // 设置所有列宽为150像素
        margeCells: true,
        //persistentState: true,//持久化
        colHeaders: true, // 使用自定义列头
        filters: true,//过滤器
        undo: true,//取消
        redo: true,//重做
        wordWrap: true,//自动换行
        copyable: true,//是否允许键盘复制
        fillHandle: true,//是否允许拖动复制
        renderAllRows: true,//是否呈现所有行
        allowInsertRow: true,
        allowInsertColumn: true,
        customBorders: true,//自定义边框设置,可数组定义
        dropdownMenu: false,//表头筛选
        ManualRowMove: true,
        cells: function () {},//指定单元格的某些属性（数组）
        afterCreateRow : function () {},
        afterRemoveRow : function () {},
        afterCreateCol : function () {},
        afterRemoveCol : function () {},
        beforeRowMove : function () {},
        afterRowMove : function () {},
        beforeColMove : function () {},
        afterColMove : function () {}
    };
    var hot = new Handsontable(hotElement, hotSettings);
    hot.addHook("afterSelectionEnd", function (r, c, r2, c2, selectionLayerLevel) {
        console.log(r, c, r2, c2, selectionLayerLevel);//返回选择的坐标
    });
    // hot.addHook("persistentStateLoad", function (a,b) {
    //     console.log(1)
    //     console.log(a)
    //     console.log(b)
    // });
    // hot.addHook("persistentStateSave", function (a,b) {
    //     console.log(2)
    //     console.log(a)
    //     console.log(b)
    // });
    // hot.addHook("persistentStateReset", function (a,b,c,d) {
    //     console.log(3)
    //     console.log(a,b,c,d)
    // });

    function clickMe() {
        htmlStr = Handsontable.helper.instanceToHTML(hot);
        console.log(htmlStr);
        console.log(Handsontable.helper.htmlToGridSettings(htmlStr))
    }
    function clickHe() {
    }

    var arrayHandle = new Array();
    // var hot = new Object();
    function impt(emt) {
        //照着文档抄的，有问题看文档
        var files = emt.files;
        var fileReader = new FileReader();
        fileReader.onload = function (ev) {
            var data = ev.target.result;
            var workbook = XLSX.read(data, {type: 'binary'});
            for (var sheet in workbook.Sheets) {
                if (workbook.Sheets.hasOwnProperty(sheet)) {
                    var htmlStr = XLSX.utils.sheet_to_html(workbook.Sheets[sheet]);
                    $("#hot1").html(htmlStr);//jquery
                    // var htmlHandle = htmlStr.match("<table.*?>.*?</table>")[0];
                    // arrayHandle = Handsontable.helper.htmlToGridSettings(htmlHandle);
                    arrayHandle = Handsontable.helper.htmlToGridSettings(htmlStr);
                    // renderTable(arrayHandle);
                    hot.updateSettings({
                        data: arrayHandle.data,
                        mergeCells: arrayHandle.mergeCells,//合并单元格
                    });
                    break;//只取第一个sheet
                }
            }
        };
        // 以二进制方式打开文件
        fileReader.readAsBinaryString(files[0]);
    }
    //------------------------------------------------------------------

</script>
</html>